<template>
  <div id="goods-info">
    <goods-name class="goods-name" :goods="goods.itemInfo"></goods-name>
    <goods-service class="goods-services" :goods="goods.services"></goods-service>
    <shop-info class="shop-info" :goods="goods.shopInfo"></shop-info>
  </div>
</template>

<script>
import GoodsName from "@/views/details/childComponents/goodsInfo/GoodsName";
import GoodsService from "@/views/details/childComponents/goodsInfo/GoodsService";
import ShopInfo from "@/views/details/childComponents/goodsInfo/ShopInfo";

export default {
  name: "GoodsInfo",
  props: {
    goods: {
      type: Object,
      default() {
        return null;
      }
    }
  },
  components: {
    GoodsName,
    GoodsService,
    ShopInfo
  }
}
</script>

<style scoped>
  #goods-info {
    padding: 10px;
  }
  .goods-name,
  .goods-services,
  .shop-info {
    background-color: #fff;
    padding: 10px;
    border-radius: 10px;
  }
  .goods-services {
    margin: 10px 0;
  }
</style>